<template>
    <div class="filter-com">
        <el-form
            :model="filterData"
            :inline="inline"
            :label-width="labelWidth"
            :disabled="disabled"
            ref="FilterForm"
            :show-message="false"
            @submit.native.prevent
        >
            <el-row
                :class="{
                    collapse: collapse.need,
                    show: collapse.need && collapse.show,
                }"
                :style="`--rowHeight:${collapse.need}px`"
            >
                <div class="filter-list" ref="form">
                    <!-- 各个筛选条件渲染 -->
                    <template v-for="(v, i) in data">
                        <el-col
                            :key="i"
                            :xl="v.span || (v.xl || 4) * (v.scale || 1)"
                            :lg="v.span || (v.lg || 6) * (v.scale || 1)"
                            :sm="v.span || (v.sm || 8) * (v.scale || 1)"
                            :xs="v.span || (v.xs || 24) * (v.scale || 1)"
                        >
                            <el-form-item
                                :label="v.label"
                                :prop="v.name"
                                :rules="v.rules || {}"
                            >
                                <!-- 选择框 -->
                                <SearchInput
                                    v-if="v.type === 'select'"
                                    v-model="filterData[v.name]"
                                    :api="v.select.api || false"
                                    :searchKey="v.select.searchKey"
                                    :option="selectOption(v)"
                                    :selectLabel="selectLabel(v)"
                                    :selectValue="selectValue(v)"
                                    :placeholder="
                                        v.placeholder || `请选择${v.label}`
                                    "
                                    :multiple="v.multiple"
                                />

                                <!-- 供应商选择框 -->
                                <SupplierSelect
                                    v-else-if="v.type === 'supplier'"
                                    typeSelect="supplierName"
                                    v-model="filterData[v.name]"
                                    :placeholder="
                                        v.placeholder || `请选择${v.label}`
                                    "
                                />

                                <!-- 客户选择框 -->
                                <SupplierSelect
                                    v-else-if="v.type === 'customer'"
                                    typeSelect="customerName"
                                    v-model="filterData[v.name]"
                                    :placeholder="
                                        v.placeholder || `请选择${v.label}`
                                    "
                                />

                                <!-- 销售员/用户选择框 -->
                                <SupplierSelect
                                    v-else-if="v.type === 'sales'"
                                    typeSelect="nickName"
                                    v-model="filterData[v.name]"
                                    :placeholder="
                                        v.placeholder || `请选择${v.label}`
                                    "
                                />

                                <!-- 时间段类型 -->
                                <div
                                    class="time-period"
                                    v-else-if="
                                        v.type && v.type.includes('period')
                                    "
                                >
                                    <!-- 日历选择时间段 -->
                                    <template v-if="v.type === 'period_date'">
                                        <div class="time-period-item">
                                            <el-date-picker
                                                value-format="yyyy-MM-dd"
                                                v-model="
                                                    filterData[
                                                        `params[${v.st}]`
                                                    ]
                                                "
                                                type="date"
                                                placeholder="起始时间"
                                            />
                                        </div>
                                        <div class="time-period-item line">
                                            -
                                        </div>
                                        <div class="time-period-item">
                                            <el-date-picker
                                                value-format="yyyy-MM-dd"
                                                v-model="
                                                    filterData[
                                                        `params[${v.end}]`
                                                    ]
                                                "
                                                type="date"
                                                placeholder="结束时间"
                                            />
                                        </div>
                                    </template>
                                    <!-- 手动输入时间段 -->
                                    <template v-else>
                                        <div class="time-period-item">
                                            <el-input
                                                type="number"
                                                v-model="filterData[v.st]"
                                                :placeholder="`起始${v.label}`"
                                                @keyup.enter.native="search"
                                            />
                                        </div>
                                        <div class="time-period-item line">
                                            -
                                        </div>
                                        <div class="time-period-item">
                                            <el-input
                                                type="number"
                                                v-model="filterData[v.end]"
                                                :placeholder="`结束${v.label}`"
                                                @keyup.enter.native="search"
                                            />
                                        </div>
                                    </template>
                                </div>

                                <el-date-picker
                                    value-format="yyyy-MM-dd"
                                    v-else-if="v.type === 'date'"
                                    v-model="filterData[v.name]"
                                    type="date"
                                    placeholder="选择日期"
                                />

                                <!-- 输入框 -->
                                <el-input
                                    v-else
                                    v-model="filterData[v.name]"
                                    :placeholder="
                                        v.placeholder || `请输入${v.label}`
                                    "
                                    size="small"
                                    :type="v.type || 'text'"
                                    @keyup.enter.native="search"
                                    @input="input(v)"
                                />
                            </el-form-item>
                        </el-col>
                    </template>
                </div>
            </el-row>
            <FormBtnGroup
                v-if="btn"
                @search="search"
                @reset="resetQuery"
                :collapse="collapse"
            />
        </el-form>
    </div>
</template>

<script>
import SearchInput from "@/components/SearchInput";
import FormBtnGroup from "./formBtnGroup.vue";
import SupplierSelect from "@/components/SupplierSelect";
export default {
    components: {
        SearchInput,
        FormBtnGroup,
        SupplierSelect,
    },
    computed: {
        selectOption() {
            return (v) => {
                let o = [];
                let { select } = v;
                let { enums } = this.$store.state;
                if (typeof select === "string") {
                    o = enums[select].list;
                } else {
                    o =
                        typeof select.option === "string"
                            ? enums[select.option].list
                            : select.option;
                }
                return o;
            };
        },
        selectLabel() {
            return (v) => {
                let label = "";
                let { select } = v;
                let { enums } = this.$store.state;

                if (typeof select === "string") {
                    label = enums[select].label;
                } else {
                    label = select.selectLabel || select.option;
                }

                return label;
            };
        },
        selectValue() {
            return (v) => {
                let value = "";
                let { select } = v;
                let { enums } = this.$store.state;
                if (typeof select === "string") {
                    value = enums[select].value;
                } else {
                    value =
                        select.selectValue ||
                        select.selectLabel ||
                        select.option;
                }
                return value;
            };
        },
    },
    props: {
        data: Array,
        "label-width": {
            type: String,
            default: "68px",
        },
        disabled: Boolean,
        inline: {
            type: Boolean,
            default: true,
        },
        btn: {
            type: Boolean,
            default: true,
        },
        line: {
            type: Number,
            default: 2,
        },
        table: null,
    },
    watch: {
        data(v) {
            let { name, value } = v;
            this.setValue(name, value);
        },
    },
    data: () => {
        return {
            filterData: {},
            collapse: {
                need: false,
                show: false,
            },
        };
    },
    created() {
        let { query } = this.$route;
        let queryArr = Object.keys(query);

        this.data.forEach((v, i) => {
            let { name, value } = v;
            queryArr.includes(name) && (value = String(query[name]));
            this.setValue(name, value);
        });
    },
    mounted() {
        this.checkHeight();
        window.onresize = this.checkHeight;
    },
    destroyed() {
        window.onresize = null;
    },
    watch: {},
    methods: {
        search() {
            let { filterData, table, $parent } = this;
            this.$emit("search", filterData);
            table && $parent.$refs[table].getData(filterData);
        },
        resetQuery() {
            this.filterData = {};
            this.search();
        },
        checkHeight() {
            let { line } = this;

            if (!line) {
                this.collapse.need = false;
                return false;
            }

            let { scrollHeight } = this.$refs.form;
            if (scrollHeight > line * 60) {
                this.collapse.need = scrollHeight;
            } else {
                this.collapse.need = 0;
            }
        },
        set(data = {}) {
            this.filterData = data;
        },
        setValue(k, v) {
            this.$set(this.filterData, k, v);
        },
        get() {
            return this.filterData;
        },
        checkForm(cb) {
            this.$refs["FilterForm"].validate((pass, error) => {
                if (!pass) {
                    let k = Object.keys(error)[0];
                    let msg = error[k][0].message;
                    this.msgError(msg);
                    try {
                        this.$refs[k][0].editCell(1);
                    } catch (error) {}
                    return false;
                }
                cb && cb(pass, error);
            });
        },
        input(v) {
            v.onchange && v.onchange(this.filterData, this);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep.filter-com {
    padding: 20px 0;
    font-size: 12px;

    input {
        height: 32px;
        line-height: 32px;
        font-size: 12px;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }

    .el-form {
        .el-row {
            display: flex;
            flex-wrap: wrap;

            .el-col {
                height: 60px;
            }

            .filter-list {
                width: 100%;
            }

            .el-form-item {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                label {
                    flex-shrink: 0;
                }

                .el-form-item__content {
                    flex: 1;
                    .el-select {
                        width: 100%;
                    }
                }
            }

            &.collapse {
                height: 120px;
                overflow: hidden;
                transition: height 0.1s;
                &.show {
                    height: var(--rowHeight);
                    overflow: unset;
                }
            }
        }

        .el-input__inner {
            padding: 0 10px;
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor--date {
            input {
                text-align: center;
            }
        }
    }

    .time-period {
        display: flex;
        align-items: center;
        justify-content: center;
        .time-period-item {
            width: 100%;
            &.line {
                margin: 0 5px;
                width: auto;
                color: #999;
            }

            input {
                text-align: center;
            }
        }
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 100%;
    }
}
</style>